<template>
  <div class="app-container">
    <form-filter @on-filter="submitFilterForm"/>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..." class="mgtop">
      <el-table-column label="会员账号" prop="target_account" align="center" width="120">
      </el-table-column>
      <el-table-column label="会员昵称" prop="target_nick" align="center" width="120">

      </el-table-column>
      <el-table-column label="操作类型" prop="type" align="center" width="120">
        <template slot-scope="{row}">
          {{row.type | switchType}}
        </template>
      </el-table-column>
      <el-table-column label="操作人" prop="account" align="center" width="120">

      </el-table-column>
      <el-table-column label="操作时间" prop="time" align="center" width="220">

      </el-table-column>
      <el-table-column label="禁言时长" prop="ttl_text" align="center" >

      </el-table-column>
      <el-table-column label="禁言类别" prop="cate" align="center" width="220">
      </el-table-column>
      <el-table-column label="备注" prop="remark" align="center" width="220">
      </el-table-column>
       <el-table-column label="操作" prop="username" align="center" width="220" fixed="right">
         <template slot-scope="{row}">
       <el-button type="text" v-if="roleCheck('chatRoom-operating-detail')" @click="openDialog(row,'detail')">查看详情</el-button>

        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
       <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="Number(tableData.total)">
      </el-pagination>
    </div>
<detailDialog
      :dialogVisible="DetailDialogVisible"
      v-if="DetailDialogVisible"
      :row-data="dialogData"
      :type='2'
      @cancel="DetailDialogVisible = false"
    />
  </div>
</template>
chatRoom
<script>
import { getHistoryList } from '@/services/api/chatRoom';
import FormFilter from './operatingFilter.vue';
import detailDialog from './dialog/detailDialog';
import { grid } from '@/build';

export default {
  name: 'bannedTable',
  components: { FormFilter, detailDialog },
  mixins: [grid],
  props: ['value'],
  data() {
    return {
      tableData: {},
      auditStep: 0,
      rowData: {},
      DetailDialogVisible: false,
      dialogData: '',
      filters: {
        page: 1,
        size: 20,
        start_time: moment().format('YYYY-MM-DD 00:00:00'),
        end_time: moment().format('YYYY-MM-DD 23:59:59'),
      },
      filterDateType: false,
    };
  },
  filters: {
    switchType: (type) => {
      let str = '';
      // eslint-disable-next-line default-case
      switch (type) {
        case '1':
          str = '禁言';
          break;
        case '2':
          str = '人工解禁';
          break;
        case '3':
          str = '自动解禁';
          break;
        case '4':
          str = '忽略';
          break;
      }
      return str;
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.gridSearch();
      }
    },
  },
  methods: {
    submitFilterForm(formInline) {
      const { time } = formInline;
      let start_time; let end_time;
      if (!_.isUndefined(time) && _.isArray(time)) {
        start_time = time[0];
        end_time = time[1];
        this.filters.start_time = start_time;
        this.filters.end_time = end_time;
        // formInline = { ...formInline, start_time, end_time };
      } else {
        this.filters.start_time = undefined;
        this.filters.end_time = undefined;
      }
      if (formInline.cate == '全部') { formInline.cate = ''; }
      this.filters = { ...this.filters, ...formInline };
      this.gridSearch();
    },
    openDialog(row) {
      this.DetailDialogVisible = true;
      window.scrollTo(0, 0);
      this.dialogData = row;
    },

  },
  mounted() {
    this.bindGet(getHistoryList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',

    });
    this.getAll();
  },
};
</script>

<style scoped>
.mgtop{margin-top:30px}
</style>
